<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .grid-container {
      /* 网格布局 */
      display: grid;
      grid-template-rows: repeat(2, 100px);
      grid-template-columns: repeat(3, 100px);
      margin: 30px;
      /* 行间距10px 列间距20px */
      gap: 10px 20px;
    }
    .grid-item:nth-child(n) {
      background-color: skyblue;
    }
    .grid-item:nth-child(2n) {
      background-color: pink;
    }
  </style>
  <body>
    <!--  
        属性名	    说明
        row-gap	    设置行与行的间隔（行间距）
        column-gap	设置列与列的间隔（列间距）
        gap	是row-gap和column-gap的合并简写形式
    -->
    <div class="grid-container">
      <div class="grid-item">1</div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
      <div class="grid-item">5</div>
      <div class="grid-item">6</div>
    </div>
  </body>
</html>